<template>
    <div>
        <el-dialog
            :visible.sync="mapDivDialogVisible.v"
            v-dialogDrag
            @open="mapInit()"
            width="65%">
            <div class="content" style="margin-bottom: 20px;margin-right: 20px">
                <el-col :span="6">
                    <div>
                        <p>选择数据： </p>
                        <el-select @change="getSelectedData"
                                v-model="value" clearable placeholder="请选择添加数据">
                            <el-option
                                    v-for="item in options"
                                    v-bind:key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <el-button type="primary" plain @click="addMapData" style="height:40px;width:35%;margin-top: 40px;">加载</el-button>
                    <el-button type="success" plain @click="commitMapData" style="height:40px;width:35%;margin-left: 20px" >确定</el-button>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="17" style="box-shadow: 0px 0px 5px #888888;">
                    <div id="map1" ref="map" class="map-div" style="width: 100%;height:100%;"></div>
                </el-col>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import "openlayers/dist/ol-debug.js";

    let source = new ol.source.Vector({ wrapX: false });
    let vector = new ol.layer.Vector({
        source: source
    });
    export default {
        name: "mapDivDialog",
        components: {

        },
        props: {
            mapDivDialogVisible: Object,
            // isDialog:Object,
        },
        data(){
            return{
                map:null,
                value:'',
                options: [],
                fieldOptionsel:[],
                mapqueryUrl:'',
                mapData:{},
                extentData:[],
                mapDivData:{},
            }
        },
        methods:{
            mapInit() {
                this.$nextTick(function() {
                    let that = this;
                    that.$refs.map.innerText = null;
                    let gaode_layer = new ol.layer.Tile({
                        source: new ol.source.XYZ({
                            url:
                                "http://webrd03.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8"
                        }),
                        projection: "EPSG:3857"
                    });
                    that.map = new ol.Map({
                        target: "map1",
                        layers: [gaode_layer, vector],
                        view: new ol.View({
                            center: ol.proj.transform([116.4, 39.9], "EPSG:4326", "EPSG:3857"), //初始化中心为北京
                            zoom: 10,
                            minZoom: 3,
                            maxZoom: 18
                        }),
                        controls: ol.control
                            .defaults({
                                attributionOptions: { collapsible: false },
                                rotateOptions: { className: "custom-rotate" }
                            })
                            .extend([
                                new ol.control.OverviewMap({
                                    collapsible: false,
                                    collapsed: false,
                                    className: "custom-overview-map"
                                }),
                                new ol.control.ScaleLine({ units: "metric" }),
                                new ol.control.FullScreen({ className: "custom-fullscreen" }),
                                new ol.control.MousePosition({
                                    coordinateFormat: ol.coordinate.createStringXY(4),
                                    projection: "EPSG:4326",
                                    className: "custom-mouse-position"
                                })
                            ]),
                        logo: false
                    }); //Map初始化
                    //去掉鹰眼的放大缩小按钮
                    that.map.controls.array_[3].element.lastElementChild.style.display =
                        "none";
                });
            },
            showTable() {
                let that = this;
                this.$axios.get('/data/list?offset=0&size=100')
                    .then(function (res) {
                        if (res.code === 200) {
                            let resultList = res.body.data;
                            let result=[];
                            for(let listData of resultList){
                                if(listData.data!==null){
                                    if(listData.data.volume !==0){
                                        result.push(listData);
                                    }
                                }
                            }
                            let options = [];
                            // let selOption=[];
                            for (let i = 0; i < result.length; i++) {
                                let option = {};
                                option.value = result[i].data.pk_meta_id;
                                option.label = result[i].data.meta_name;
                                //option.id=i;
                                options.push(option);
                            }
                            that.options = options;
                            let mewOption = [{"value":"100","label":"PM2.5分布图"},{"value":"101","label":"交通拥堵情况图"}]
                            that.options = that.options.concat(mewOption);
                            // that.selOption=selOption;
                        } else {
                            // TODO 优化
                            alert(res.message);
                        }
                    }).catch(function (err) {
                    console.log(err);
                })
            },
            getSelectedData(){
              console.log(this.value)
              this.mapqueryUrl = "/data/preview/"+ this.value + "/geojson?offset=0&size=5000";
            },
            addPMData() {
                let that = this;
                let heatData = {
                    "type": "FeatureCollection",
                    "features": [
                        {
                            "type": "Feature",
                            "properties": {"count":227},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.410756,
                                    39.927596
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":157},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.400759,
                                    39.884597
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":243},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.332852,
                                    39.927678
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":195},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.345829,
                                    39.876656
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":268},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.390749,
                                    39.980596
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":321},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.454832,
                                    39.935654
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":286},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.280945,
                                    39.985762
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":215},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.167788,
                                    40.088675
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":181},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.200888,
                                    40.000739
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":223},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.272969,
                                    39.861776
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":217},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.139747,
                                    39.82264
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":231},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.177839,
                                    39.912702
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":220},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.129736,
                                    39.740634
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":189},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.500007,
                                    39.793785
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":242},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.657116,
                                    39.884897
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":252},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.649108,
                                    40.125899
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":180},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.223907,
                                    40.215749
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":194},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.099672,
                                    39.935601
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":141},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    117.093441,
                                    40.141567
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":184},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.62214,
                                    40.326902
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":136},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.825935,
                                    40.368803
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":217},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    115.965912,
                                    40.4518
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":206},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.21388,
                                    40.290724
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":177},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    115.981874,
                                    40.363787
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":133},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.904996,
                                    40.497845
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":127},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    117.113441,
                                    40.098575
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":192},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.776944,
                                    39.710801
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":207},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.293984,
                                    39.518807
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":312},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    115.993932,
                                    39.578849
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":198},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.388761,
                                    39.8976
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":202},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.387765,
                                    39.874602
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":249},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.342826,
                                    39.952658
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":203},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.3618,
                                    39.854631
                                ]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {"count":362},
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    116.476903,
                                    39.937709
                                ]
                            }
                        }


                    ]
                };

                //矢量图层 获取geojson数据
                let vectorSource = new ol.source.Vector({
                    features: (new ol.format.GeoJSON()).readFeatures(heatData, {
                        dataProjection: 'EPSG:4326',
                        featureProjection: 'EPSG:3857'
                    })
                });
                // Heatmap热力图
                let vectorLayer = new ol.layer.Heatmap({
                    source: vectorSource,
                    // opacity: [1],//透明度
                    blur: 12,//模糊大小（以像素为单位）,默认15
                    radius: 15,//半径大小（以像素为单位,默认8
                    shadow: 250,//阴影像素大小，默认250
                    weight: function (feature) {
                        // get your feature property
                        var weightProperty = feature.get('count');
                        //min max = 127 362
                        weightProperty = (weightProperty-127)/(260);
                        return weightProperty;
                    },
                    renderMode: 'vector'
                });
                that.map.addLayer(vectorLayer);
            },
            addMapData(){
                let that = this;
                if(this.value == "100" || this.value == "101"){
                    this.addPMData();
                }else{
                    this.$axios.get(this.mapqueryUrl).then(
                        function (res) {
                            if (res.body) {
                                // that.mapData = res.body;
                                // that.extentData = res.body.bbox;
                                let vectorLayer = new ol.layer.Vector({
                                    source: new ol.source.Vector({
                                        features: new ol.format.GeoJSON().readFeatures(res.body, {
                                            dataProjection: 'EPSG:4326',    // 设定JSON数据使用的坐标系
                                            featureProjection: 'EPSG:3857' // 设定当前地图使用的feature的坐标系
                                        })
                                    }),
                                    style: that.styleInit
                                });
                                let extent = ol.proj.transformExtent(res.body.bbox, 'EPSG:4326', 'EPSG:3857');
                                that.map.getView().fit(extent, that.map.getSize());//视图更新到当前图层的bbox
                                that.map.addControl(new ol.control.ZoomToExtent({
                                    extent: extent,
                                    className: "custom-zoom-extent"
                                }));//增加缩放到当前图层控件
                                that.map.addLayer(vectorLayer);
                                return vectorLayer;
                            }
                            else {
                                that.$Bus.$emit("alertModalParams", {
                                    alertType: "warning",
                                    alertDescription: "该数据为空"
                                });
                                return null;
                            }
                        }).catch(function (error) {
                        console.log(error)
                    })}},

            commitMapData(){
                this.value = '';
                this.mapDivData = this.map;
                // this.mapDivData.mapdata = this.mapData;
                // this.mapDivData.mapextent = this.mapExtent;
                this.$Bus.$emit('mapDivParams',this.mapDivData);
                this.mapDivDialogVisible.v = false;
            }
        },
        mounted(){
            this.showTable();
            $(".ol-viewport").css({"height":"98%!important","width":"98%!important"});
        },
        created(){
            let that=this;
            this.$Bus.$on('mapDivDialogVisible.v', (e) => {
                that.mapDivDialogVisible.v = e;
            });
        },

    }
</script>

<style>


</style>